import { useState,useEffect } from 'react';
import { Modal, Button, Descriptions,Typography,Tag } from 'antd';
const { Paragraph } = Typography;
import { queryDetailInfo } from '@/services/competitionTeam';
import { queryCompDetailInfo } from '@/services/competition';
const CompetitionTeamDetailInfoPanel = ({ data, closePanel }) => {
    const [open, setOpen] = useState(true);
    const [dataInfo, setDataInfo] = useState({});
    const [columnNum, setColumnNum] = useState(2)
    useEffect(() => {
        initCompetitionTeamDetailInfoData()
        initCompetitionDetailInfoData()
    }, [])
    const initCompetitionTeamDetailInfoData = async () => {
        let param = {
            unCode : data.unCode
        }
        const res = await queryDetailInfo(param);
        if (res.success) {
            setDataInfo(prevDataInfo => ({ ...prevDataInfo, ...res.data }));
        }
    }
    const initCompetitionDetailInfoData = async () => {
        let param = {
            unCode : data?.competitionUnCode
        }
        const res = await queryCompDetailInfo(param);
        if (res.success) {
            setDataInfo(prevDataInfo => ({
                ...prevDataInfo,
                compName: res.data?.name || "未知赛事"
            }));
        }
    }
    const handleCancel = () => {
        setOpen(false);
    };
    const items = [
        {
            label: '赛事名称',
            children: dataInfo?.compName,
        },
        {
            label: '队伍名称',
            children: dataInfo?.teamName,
        },

        {
            label: '队伍靶机地址',
            children: <Paragraph copyable={dataInfo?.teamNetAddress}>{dataInfo?.teamNetAddress}</Paragraph>,
        },
        {
            label: '队伍靶机端口',
            children: <Paragraph copyable={dataInfo?.teamNetPort}>{dataInfo?.teamNetPort}</Paragraph>,
        },
        {
            label: '队伍靶机登录账号',
            children: <Paragraph copyable={dataInfo?.teamAccount}>{dataInfo?.teamAccount}</Paragraph>,
        },
        {
            label: '队伍靶机登录密码',
            children: <div>{dataInfo?.teamPassword &&<Paragraph copyable={{text: dataInfo?.teamPassword}}>******************</Paragraph>}</div>,
        },
        {
            span: columnNum,
            label: '容器id',
            children: <Paragraph copyable={dataInfo?.containerId}>{dataInfo?.containerId}</Paragraph>,
        },
        {
            span: columnNum,
            label: '动态flag值',
            children: <Paragraph copyable={dataInfo?.dynamicFlagValue}>{dataInfo?.dynamicFlagValue}</Paragraph>,
        },
        {
            span: columnNum,
            label: '当前队伍分数',
            children: <Tag color="gold">{dataInfo?.currentTeamScore?dataInfo?.currentTeamScore:'暂无分数'}</Tag>,
        }
    ]
    return (
        <div>
            <Modal
                title={"参赛队伍详情"}
                open={open}
                destroyOnClose={true}
                onCancel={handleCancel}
                afterClose={closePanel}
                centered={true}
                width={'90%'}
                footer={[
                    <Button key="back" onClick={handleCancel}>
                        关闭
                    </Button>,
                ]}
            ><Descriptions bordered size='middle' column={columnNum} items={items} /></Modal>
        </div>
    )
}
export default CompetitionTeamDetailInfoPanel